Component({
  options: {
    multipleSlots: true// 在组件定义时的选项中启用多slot支持  
  },
  /** 
   * 组件的属性列表 
   */
  properties: {

  },
  /** 
   * 组件的初始数据 
   */
  data: {
    menuListShow: false,
    isShow: false
  },
  /** 
   * 组件的方法列表 
   */
  methods: {
    //点击菜单图标显示导航菜单ƒ
    showMnue: function (event) {
      this.setData({
        menuListShow: true,
        coverShow: true,
      })
      if (this.data.isShow) {
        this.takeBack();
        this.setData({
          isShow: false
        })
      } else {
        this.popp();
        this.setData({
          isShow: true
        })
      }
    },
    //菜单弹出动画
    popp: function () {
      var animation1 = wx.createAnimation({
        duration: 300,
        timingFunction: 'ease-in-out',
      })
      var animation2 = wx.createAnimation({
        duration: 400,
        timingFunction: 'ease-in-out',
      })
      var animation3 = wx.createAnimation({
        duration: 500,
        timingFunction: 'ease-in-out',
      })
      var animation4 = wx.createAnimation({
        duration: 600,
        timingFunction: 'ease-in-out',
      })
      var animation5 = wx.createAnimation({
        duration: 700,
        timingFunction: 'ease-in-out',
      })
      var animation6 = wx.createAnimation({
        duration: 800,
        timingFunction: 'ease-in-out',
      })
      animation1.translateX(0).step();
      animation2.translateX(0).step();
      animation3.translateX(0).step();
      animation4.translateX(0).step();
      animation5.translateX(0).step();
      animation6.translateX(0).step();
      this.setData({
        animation1: animation1.export(),
        animation2: animation2.export(),
        animation3: animation3.export(),
        animation4: animation4.export(),
        animation5: animation5.export(),
        animation6: animation6.export(),
      })
    },
    //菜单收回动画
    takeBack: function () {
      var animation1 = wx.createAnimation({
        duration: 300,
        timingFunction: 'ease-in-out',
      })
      var animation2 = wx.createAnimation({
        duration: 400,
        timingFunction: 'ease-in-out',
      })
      var animation3 = wx.createAnimation({
        duration: 500,
        timingFunction: 'ease-in-out',
      })
      var animation4 = wx.createAnimation({
        duration: 600,
        timingFunction: 'ease-in-out',
      })
      var animation5 = wx.createAnimation({
        duration: 700,
        timingFunction: 'ease-in-out',
      })
      var animation6 = wx.createAnimation({
        duration: 800,
        timingFunction: 'ease-in-out',
      })
      animation1.translateX(140).step();
      animation2.translateX(160).step();
      animation3.translateX(180).step();
      animation4.translateX(200).step();
      animation5.translateX(220).step();
      animation6.translateX(240).step();
      this.setData({
        animation1: animation1.export(),
        animation2: animation2.export(),
        animation3: animation3.export(),
        animation4: animation4.export(),
        animation5: animation5.export(),
        animation6: animation6.export(),
      });
      var that = this;
      setTimeout(function () {
        that.setData({
          menuListShow: false
        })
      }, 500)
    }
  }
})